<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加疫苗预约信息</title>
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <style>
        .btnblock {
            text-align: center;
        }

        td {
            vertical-align: middle !important;
        }
    </style>
</head>
<body>
    <div class="container col-6">
        <br>
        <table class="table table-bordered position-relative">
            <caption></caption>
            <thead>
            <tr>
                <th colspan="3">添加疫苗预约信息</th>
            </tr>
            </thead>

            <form action="booking?opr=add" method="post">
                <tbody>
                <input type="hidden" name="opr" value="add">
                <tr>
                    <td>预约人姓名*</td>
                    <td>
                        <input type="text" name="name" class="form-control" id="name">


                    </td>
                </tr>

                <tr>
                    <td>预约人身份证号*</td>
                    <td>
                        <input type="text" name="cardId" class="form-control" id="cardId">
                    </td>
                    <span id="tips" class="position-absolute" style="right: -100px;top: 155px"></span>
                </tr>

                <tr>
                    <td>预约接种日期*</td>
                    <td>
                        <input type="text" name="date" class="form-control" id="date">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="btnblock">
                        <button type="submit" id="sub" class="btn btn-primary col-2">提交</button>
                    </td>
                </tr>
                </tbody>
            </form>
        </table>
    </div>

<script src="./static/js/jquery-3.5.1.js"></script>
<script src="./static/js/bootstrap.js"></script>
<script !src="">
    $(function (){
        $("#sub").click(function (){
            if ($("#name").val().trim().length <= 0 || $("#cardId").val().trim().length <= 0 || $("#date").val().trim().length <= 0){
                alert("请填写完整的预约信息");
                return false;
            }else if($("#date").val().trim().length > 0){
                let reg = /(?!0000)[0-9]{4}-((0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-8])|(0[13-9]|1[0-2])-(29|30)|(0[13578]|1[02])-31)/;
                if(!reg.test($("#date").val())){
                    alert("日期格式不正确");
                    return false;
                }
            }
        });

        $("#cardId").blur(function (){
            $.ajax({
                url : "booking",
                method : "post",
                dataType : "text",
                data : {
                    "opr" : "getBooking",
                    "cardNum" : $("#cardId").val().trim()
                },
                success : function (data){
                    if (data == "true"){
                        $("#tips").text("已存在此号码");
                        $("#sub").attr("type","button")
                    }else {
                        $("#tips").text("");
                        $("#sub").attr("type","submit")
                    }
                }

            })
        })
    });
</script>
</body>
</html>
